<template>
  <div class="box">
    <!-- 顶部文字 -->
    <div class="app-container">
      <span>小区管理</span>
      <p>用于展示小区列表信息，以及增加,修改,删除等操作</p>
    </div>
    <!-- 头部输入框 -->
    <el-card class="box-but">
      <el-form class="demo-form-inline" :inline="true">
        <el-form-item>
          <span>小区名称</span>
          <el-input v-model="data.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <span>开发者名称</span>
          <el-input v-model="data.developer" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <span>物业公司名称</span>
          <el-input v-model="data.estate" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="time">
          <span>创建时间</span>
          <el-date-picker
            v-model="data.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item class="but">
          <el-button type="primary" size="mini" @click.native.stop="inquireData">查询</el-button>
          <el-button size="mini" @click.native="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据主体 -->
    <el-card class="box-card">
      <el-button type="primary" class="but-flet" size="small" @click.native.stop="OpenDrawe">新增小区</el-button>
      <el-table style="width: 100%" :data="list">
        <el-table-column prop="thumb" label="缩略图">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="segmentation('http://124.223.14.236:8881'+row.thumb)[0]"
              :preview-src-list="segmentation('http://124.223.14.236:8881'+row.thumb)"
            >
              <div slot="error" class="image-slot" style="width: 100px; height: 100px">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.7Hy8znZ01pyCwN8l6zDWVwAAAA?pid=ImgDet&rs=1" alt="" style="width: 100px; height: 100px">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="小区名称" />
        <el-table-column prop="address" label="坐落地址" />
        <el-table-column prop="area" label="占地面积" />
        <el-table-column prop="total_building" label="总栋数" />
        <el-table-column prop="greening_rate" label="绿化率" />
        <el-table-column prop="developer" label="开发商名称" />
        <el-table-column prop="estate" label="物流公司名称" />
        <el-table-column prop="create_time" label="创建时间">
          <!-- 格式化时间 -->
          <template #default="{ row }">
            {{ entryTime(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click.native.stop="editButton(row.id)">编辑</el-button>
            <el-button type="text" @click="delData(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-sizes="[2, 5, 10, 20]"
        :page-size="data.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 底部文字 -->
    <div class="bottomtxt">
      <p>Ant Design Pro黑马前端合肥前端欢迎您</p>
      <p>© 2023 悦兴物业集团</p>
    </div>
    <Drawer ref="Drawer" :drawer.sync="drawer" :user-id="userId" />
    <Autonavi />
  </div>
</template>

<script>
import Drawer from './components/drawer.vue'
import { BBSDataAPI, DelBBSDataAPI } from '@/api/BBSManage'
import Autonavi from '@/components/AutoNavi/index.vue'
import dayjs from 'dayjs'
export default {
  name: 'One',
  components: {
    Drawer, Autonavi
  },
  data() {
    return {
      // 获取数据携带的参数
      data: {
        // 页码
        current: 1,
        // 单页数据
        pageSize: 10,
        // 小区名字
        name: '',
        // 开发商名字
        developer: '',
        // 物流公司名称
        estate: '',
        // 日期绑定的时间
        create_time: null
      },
      // 抽屉开关
      drawer: false,
      // 获取到的数据
      list: [],
      // 总数
      total: 0,
      userId: 0
    }
  },
  created() {
    this.BBSData()
  },
  methods: {
    // 获取数据
    async BBSData() {
      const { data } = await BBSDataAPI(this.data)
      this.list = data.rows
      this.total = data.count
      // console.log(data)
    },
    // 切割图片代码
    segmentation(value) {
      return value.split(',')
    },
    // 格式创建时间  需要 npm i dayjs  下载插件
    entryTime(value) {
      // 使用插件格式化事件格式
      return value ? dayjs(value).format('YYYY-MM-DD hh:mm:ss') : ''
    },
    // 分页页数
    handleSizeChange(val) {
      this.data.pageSize = val
      this.BBSData()
    },
    // 分页页码
    handleCurrentChange(val) {
      this.data.current = val
      this.BBSData()
    },
    // 删除数据
    async delData(id) {
      this.$confirm('确认删除？', '温馨提示').then(async() => {
        await DelBBSDataAPI(id)
        this.$message.success('删除成功')
        this.BBSData()
      })
    },
    // 查询
    async inquireData() {
      if (this.data.create_time) {
        this.data.create_time = this.data.create_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await BBSDataAPI(this.data)
      this.list = res.rows
      this.total = res.count
    },
    // 重置数据
    reset() {
      this.data = {
        // 页码
        current: 1,
        // 单页数据
        pageSize: 10,
        // 小区名字
        name: '',
        // 开发商名字
        developer: '',
        // 物流公司名称
        estate: '',
        // 日期绑定的时间
        create_time: null
      }
      this.BBSData()
    },
    // 新增打开抽屉
    OpenDrawe() {
      this.drawer = true
    },
    // 编辑打开抽屉
    editButton(id) {
      this.drawer = true
      this.$refs.Drawer.ObtainDetails(id)
      // console.log(this.userId)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 40px 80px;
  .app-container{
    padding: 0;
    span{
      font-weight:800;
      font-size: 18px;
      margin-right: 10px;
    }
    p{
      display:inline-block;
    }
  }
  .box-but{
    margin-bottom: 20px;
    span{
      font-weight: 800;
    }
    .but{
      margin-top: 37px;
      width: 50px;
    }
    .el-date-editor{
      display: block;
      padding: 0 0 0 10px;
    }
     .el-form-item {
      margin-right: 15px;
      // margin-left: 40px;
      width: 150px;
    ::v-deep .el-input__inner{
     height: 35px;
      line-height: 35px;
      width: 150px;
    }
    ::v-deep .el-date-editor--daterange{
      width: 235px;
    }
  }
    .el-form-item:nth-child(4){
      width: 235px;
    }
    .el-form-item:nth-child(5){
      width: 150px;
    }
  }
  .box-card{
     margin-bottom: 20px;
    .but-flet{
      float: right;
    }
  }
  .bottomtxt{
    text-align: center;
    p{
      margin: 0;
    }
  }
  .el-pagination{
    float: right;
    margin: 20px 0;
  }
}
</style>
